<template>
    <div>
        <div class="menu">
            <el-button type="text" @click="dialogVisible = true">点击打开UPLOAD菜单</el-button>
            <el-dialog title="请选择一张jpg或png图片上传" :visible.sync="dialogVisible" width="30%" >
                <span>
                    <label for="" type="button" class="btn">
                        <span>选择图片</span>
                        <input id="input" type="file" @change="changeFile" multiple />
                    </label>
                    <button id="upload" class="btn" style="margin-left: 30px; width: 60px;top:-10px;" @click="upload">上传</button>
                </span>
            </el-dialog>
            
            <el-input v-model="search" placeholder="请输入图片名"  style=" width:200px;"></el-input>
            <el-button @click="searchImg" type="primary" >点我搜索</el-button> 

        </div>

        <div class="list">
            <el-table :data="fileList" style="width: 100%">
                <el-table-column label="图片ID" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.imgId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="图片名称" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.imgName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="大小" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.imgSize }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template #default="scope">
                        <span>{{ scope.row.imgType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="最后一次修改时间">
                    <template #default="scope">
                        <span>{{ scope.row.imgTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="缩略图">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.imgSrc">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="mini" @click="handleUp(scope.$index, scope.row)">置顶</el-button>
                        <el-button size="mini" @click="handleEdit(scope.row.imgId, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteChapter(scope.row.imgId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-pagination background :total="total" :page-size="currentSize" @current-change="changeList" :current-page="currentPage"
            layout="prev, pager, next">
        </el-pagination>


        
        <el-form :model="formLabelAlign" v-show="drawer" label-width="80px">

            <el-form-item label="图片名称">
                <el-input v-model="imgName"></el-input>
            </el-form-item>
            <el-form-item label="图片类型">
                <el-input v-model="imgType"></el-input>
            </el-form-item>
            <el-form-item label="图片大小">
                <el-input v-model="imgSize"></el-input>
            </el-form-item>
            <el-form-item label="最后一次修改时间">
                <el-input v-model="imgTime"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="editForm">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios'
import router from '../router'
export default {
    data() {
        return {
            fileList: [],
            currentList: [],
            total: 0,
            currentSize: 4,
            dialogVisible: false,
            drawer2:false,
            drawer:false,
            search:'',
            file: {},
            content: "",
            type: "",
            currentPage: 1,
            search:'',
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            },
            imgName:'',
            imgId:"",
            imgSize:'',
            imgSrc:"",
            imgTime:"",
            imgType:"",
            
        };
    },
    methods: {
        upload() {
            let formData = new FormData();
            formData.append("file", this.content);
            // let data={ "fileId": Math.random(), "formData": formData.get("file"), "fileType": this.type, "fileName": this.file.name, "fileSize": this.file.size, "lastModifiedDate": this.file.lastModifiedDate};
            // console.log(data);
            axios.post("http://localhost:3000/upload", { "fileId": Math.random(), "formData": formData.get("file"), "fileType": this.type, "fileName": this.file.name, "fileSize": this.file.size, "lastModifiedDate": this.file.lastModifiedDate})
                .then(res => {
                if (res.status == 200) {
                    console.log("upload", res.data);
                }
                
                this.getList(1);
            });
        },
        changeFile(e) {
            this.file = e.target.files[0];
            console.log(this.file);
            let reader = new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            reader.onload = () => {
                this.content = reader.result;
                this.type = e.target.files[0].type;
            };
        },
        getList(num) {
            axios.get("http://localhost:3000/getlist",{params:{currentFilePage:num}}).then(res => {
                console.log(res.status);
                if (res.status == 200) {
                    this.fileList=res.data.fileList;
                    this.total=res.data.total;
                }
            });
        },
        editForm() {
            let imgName = this.imgName;
            let imgSize = this.imgSize;
            let imgTime = this.imgTime;
            let imgType = this.imgType;
            let imgId=this.imgId;
            axios.post("http://localhost:3000/editImg", {
                imgId:imgId,
                imgName: imgName,
                imgSize: imgSize,
                imgTime: imgTime,
                imgType: imgType
            }).then(res => {
                if (res.data.code == 200) {
                    this.drawer = false;
                    this.getList(1)
                }
            })
        },
        handleEdit(id, row) {
            this.drawer = true;
            this.imgId=id;
            this.imgName = row.imgName;
            this.imgSize = row.imgSize;
            this.imgTime = row.imgTime;
            this.imgType = row.imgType;
        },
        deleteChapter(id) {
            console.log("deleteId", id);
            axios.post("http://localhost:3000/del", {
                id: id
            }).then(res => {
                if (res.data == "success") {
                    
                    this.getList(1);
                }
            });
        },
        searchImg(){
            axios.post('http://localhost:3000/searchImg', { imgName:this.search })
                .then(res => {
                    if (res.status== 200) {
                        this.fileList = res.data;
                        this.total=1;
                    }
                })
        },
        handleUp(index,row){
            this.imgName=row.imgName;
            console.log(this.imgName);
            axios.post('http://localhost:3000/upImg',{name:this.imgName})
            .then(res => {
                    if (res.status== 200) {
                        this.fileList = res.data;
                    }
                })
        },
        changeList(num) {
            this.getList(num);
        }
    },
    mounted() {
        this.getList(1);
    },
    components: { router }
}
</script>
<style>
.list {
    margin: 0 auto;
    border: 5px dashed paleturquoise;
    width: 100%;
    height: 100%;
}
.menu{
    margin: 0 auto;
    border: 5px dashed pink;
    width: 100%;
    height: 20px;
    padding-bottom: 8px;
}
* {
    margin:0 auto;
    z-index: 0;
  
  }
    label input {
      position: absolute;
      left: 0;
      top: -300;
      opacity: 0;
  }
    .btn {
      left:100px;
      top:0px;
      width: 80px;
      height: 30px;
      background-color: rgb(49, 132, 241);
      border: 0px;
      border-radius: 10px;
      color: white;
      position: relative;
      overflow: hidden;
      text-align: center;
      vertical-align: center;
      border-radius: 5px;
      display: inline-block;
  
  }


  
</style>
